<!--
 * @Description: 图文文章列表
 * @Author: Huang Junjie
 * @Date: 2021-05-08 11:00:37
 * @LastEditTime: 2021-05-08 12:01:45
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="graphic-article-list-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <el-carousel class="content" height="360px" indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <img class="img-style" width="100%" height="360" :src="require('@/assets/images/login-bg.jpg')">
          <div class="content-text">1231232131</div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.graphic-article-list-style {
  color: white;
  width: 902px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    position: relative;
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.48);
    box-sizing: border-box;
    .content {
      padding: 20px;
      height: 500px;
      overflow: hidden;
      .img-style {
        object-fit: cover;
      }
      .content-text {
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        padding: 10px;
        background-color: rgba($color: #000000, $alpha: 0.5);
      }
    }
  }
}
</style>
